<template>
  <div>
    <div>
      <headerTop></headerTop>
    </div>
    <div>
      <headerMin :searchState="searchState"></headerMin>
    </div>
    <div class="doctorWait_content wrap">
      <div class="wa_indexes">首页</div>
      <!-- 步骤 -->
      <div class="wa_step">
        <el-steps :active="state" align-center>
          <el-step title="选择医生" description></el-step>
          <el-step title="选择问诊方式" description></el-step>
          <el-step title="等待接诊" description></el-step>
          <el-step title="线上问诊" description></el-step>
        </el-steps>
      </div>
      <!-- 提示信息 -->
      <div class="wa_tips">
        <p>
          医师正在问诊中，请耐心等待，您当前处于第
          <span>6</span> 位。
        </p>等待期间，您可以填写用户档案，便于节约您的问诊时间。
      </div>
      <!-- 档案 -->
      <div class="wa_record">
        <div class="title">
          用户档案
          <div @click="addRecord = 1" class="fr">添加档案</div>
        </div>
        <div v-if="recordType == 0" class="no">暂无用户档案</div>
        <div v-if="recordType == 1" class="wa_list">
          <div class="wa_user">
            <p class="wa_name one">
              王老六
              <span></span> 男
            </p>
            <p class="one phone">199537666888</p>
            <p class="two">头闷胀痛、鼻塞伴有流脓鼻涕两年左右，近日嗅觉减退且...</p>
            <div class="add_bottom">
              2019-10-18
              <div class="fr">
                <span class="add_record_set">修改</span>
                <span class="add_record_remove">删除</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 添加档案 -->
      <div @click="addRecord = 0" v-show="addRecord == 1" class="addRecord">
        <div class="addRecord_box">
          <div @click.stop class="ad_title">
            新增档案信息
            <img
              @click="addRecord = 0"
              class="none"
              src="@/assets/image/Interrogation_Popup_Close@2x.png"
              alt
            />
          </div>
          <div @click.stop class="ar_box">
            <div class="ar_txt">
              <div class="ar_txts">
                姓
                <i></i>
                <i></i>
                <i></i>
                <i></i> 名
              </div>
              <input v-model="name" type="text" maxlength="12" />
            </div>
            <div class="ar_txt">
              <div class="ar_txts">
                性
                <i></i>
                <i></i>
                <i></i>
                <i></i> 别
              </div>
              <div class="as">
                <el-radio v-model="sex" label="0">男</el-radio>
                <el-radio v-model="sex" label="1">女</el-radio>
              </div>
            </div>
            <div class="ar_txt w60">
              <div class="ar_txts">
                年
                <i></i>
                <i></i>
                <i></i>龄
              </div>
              <input v-model="age" type="text" maxlength="3" />
            </div>
            <div class="ar_txt w60">
              <div class="ar_txts">
                身
                <i></i>
                <i></i>
                <i></i> 高
              </div>
              <input v-model="h" type="text" maxlength="3" />C M
            </div>
            <div class="ar_txt w60">
              <div class="ar_txts">
                体
                <i></i>
                <i></i>
                <i></i> 重
              </div>
              <input v-model="kg" type="text" maxlength="3" />K G
            </div>
            <div class="ar_txt">
              <div class="ar_txts">联系方式</div>
              <input v-model="mobile" type="text" maxlength="11" />
            </div>
            <div class="ar_txt">
              <div class="ar_txts">
                过
                <i></i>敏
                <i></i>史
              </div>
              <textarea v-model="guominshi"></textarea>
            </div>
            <div class="ar_txt">
              <div class="ar_txts">
                遗
                <i></i>传
                <i></i>史
              </div>
              <textarea v-model="yichuanshi"></textarea>
            </div>
            <div class="ar_txt">
              <div class="ar_txts">病情情况</div>
              <textarea v-model="bingqing"></textarea>
            </div>
            <div class="ar_txt">
              <div class="ar_txts">
                附
                <i></i>
                <i></i>
                <i></i> 件
              </div>
              <el-upload
                :action="imageUrl"
                list-type="picture-card"
                :on-success="ListImgSuccess"
                :before-upload="beforeAvatarUpload"
                :on-remove="ListImgRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <p @click="checking()">保存</p>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="wa_bottom">退出等待</div>
    </div>
    <div class="bg1">
      <publicBottom></publicBottom>
    </div>
  </div>
</template>
<script>
import headerTop from "@/components/public/public_headerTop.vue";
import headerMin from "@/components/index/index_header_min";
import publicBottom from "@/components/public/public_bottom.vue";
import { add_dangan } from "@/request/user";
export default {
  components: {
    headerTop,
    headerMin,
    publicBottom
  },
  props: [],
  data() {
    return {
      searchState: 0,
      search: "",
      state: 3, // 步骤条
      name: "",
      sex: "0", //0男   1 女
      age: "",
      h: "",
      kg: "",
      mobile: "",
      guominshi: "",
      yichuanshi: "",
      bingqing: "",
      imgArr: [], //资质证明 图的 list
      recordType: 1, // 是否有档案信息
      addRecord: 0 // 增加 档案信息 1显示
    };
  },
  created() {
    let datas = localStorage.getItem("lzyyToken");
    let Athis = this;
    if (datas != null) {
      this.$tokens = datas;
    } else {
      this.$message.error("登录错误，请重新登录");
      setTimeout(function() {
        Athis.$router.replace({ path: "/land" });
      }, 1000);
    }
  },
  methods: {
    send() {
      let imgData = [];
      if (this.imgArr != "") {
        for (let i = 0; i < this.imgArr.length; i++) {
          imgData.push(this.imgArr[i].url);
        }
        imgData = imgData.join(",");
      }
      add_dangan({
        token: this.$user.token,
        realname: this.name,
        mobile: this.mobile,
        sex: this.sex,
        birthday: this.age,
        weight: this.kg,
        height: this.h,
        allergy: this.guominshi,
        genetic_disease: this.yichuanshi,
        disease_desc: this.bingqing,
        report_urls: imgData
      }).then(res => {
        if (res.code == 1) {
          this.imgArr = [];
          // this.start();
          this.addRecord = 0;
          this.$message({
            message: "保存成功",
            type: "success"
          });
        }
      });
    },
    checking() {
      if (this.name == "") {
        this.$message.error("姓名不能为空");
      } else if (this.age == "") {
        this.$message.error("年龄不能为空");
      } else if (this.h == "") {
        this.$message.error("身高不能为空");
      } else if (this.kg == "") {
        this.$message.error("体重不能为空");
      } else if (this.mobile == "") {
        this.$message.error("联系方式不能为空");
      } else if (this.guominshi == "") {
        this.$message.error("过敏史不能为空");
      } else if (this.yichuanshi == "") {
        this.$message.error("遗传史不能为空");
      } else if (this.bingqing == "") {
        this.$message.error("病情不能为空");
      } else {
        this.send();
      }
    },
    GoAllGoods() {
      this.$router.replace({ path: "/allGoods" });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //   资质证明 图的 list
    ListImgSuccess(response, file, fileList) {
      let imgurl = response.data.file.url;
      file.url = imgurl;
      this.imgArr = fileList;
    },
    //   资质证明 删除
    ListImgRemove(file, fileList) {
      this.imgArr = fileList;
    }
  }
};
</script>
<style lang="less" scoped>
@import "./doctor";
</style>